<template>
  <div class="play">
    <div class="header">
      <div class="title">
        <!-- 跳转到首页 -->
        <router-link to="/">
          <i class="iconfont icon-shouye left"></i>
        </router-link>
        <div class="music-info">黄家驹</div>
        <router-link to="/search">
          <i class="iconfont icon-sousuo right"></i>
        </router-link>
      </div>
    </div>
    <div class="song-info">
<div class="song-info-img">
  <img src="../../assets/images/yinyue.png" alt="">
</div>
 <div class="iconbox">
 <i class="iconfont icon-shoucang2 left"></i>
 <i class="box"></i>
 <i class="iconfont icon-xiazai right"></i>
 </div>
    </div>
    <!-- 音乐播放器 -->
    <div class="song">
      <audio controls src="http://m804.music.126.net/20220330172040/09ad46ecd558e77e488c12be28e02509/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/13688367969/3b66/5f37/cc87/0d0ee06aa96e1ab16bd21783ca19fd41.mp3?authSecret=0000017fda09a7bd133c0aaba55f19e8"></audio>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      getPlayer: {}
    }
  },
  mounted () {
    this.$api.getPlayer({
      id: this.$route.params.id
    }).then(res => {
      this.getPlayer = res.data[0]
      console.log(res, '歌曲播放')
    })
  }
}
</script>

<style scoped>
.header {
  padding: 15px;
}

.music-info {
  flex: 1;
  font-size: 20px;
}

.title {
  display: flex;
  text-align: center;
}

.left {
  font-size: 30px;
}

.ca {
  color: red;
}

.right {
  font-size: 30px;
}

.song-info {
  padding: 15px;
}

.song-info-img {
  text-align: center;
}

.song-info-img img {
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
}

.song-lrc {
  margin-top: 10px;
  min-height: 50px;
}

.iconbox {
  display: flex;
  margin-top: 30px;
}

.iconbox .box {
  flex: 1;
}

.song {
  width: 100%;
  text-align: center;
}

.song audio {
  width: 80%;
}

.active {
  color: #222;
}

.author {
  font-size: 12px;
  color: #999;
}
</style>
